<script setup>
import * as echarts from "echarts"
import {onMounted, ref, watch} from "vue";
const redArea=ref()
const props=defineProps({
  redTideArea:{
    type:Object,
    default:()=>({})
  }
})
const option=ref({
  color: ['#FFBF00', '#80FFA5', '#37A2FF', '#FF0087'],
  title: {
    text: '我国海域赤潮面积',
    textStyle: {
      fontSize:14,//加
      //color:white",
      letterSpacing:1
    },
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#f1f1f3'
      }
    }
  },
  legend: {
    // data: ['黄海', '渤海', '东海', '南海'],
    data:[],
    x:'right',
  },
  toolbox: {
    show: false, /*启用功能*/
    feature: {
      saveAsImage: {show: false} //下载工具
    }
  },
  grid: {
    left: '3.5%',
    right: '4.5%',
    bottom: '2%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      // data: ['2017', '2018', '2019', '2020', '2021', '2022', '2023']
      data:[]
    }
  ],

  yAxis: {
    name: '面积(平方公里)',
    type: 'value',
    axisLine: {
      show: true
    },
    axisLabel: {
      show: true,
      color: 'white',
      fontSize: 12,
    },
  },

  series: [
    {
      name: '黄海',
      // data: [140, 232, 101, 264, 90, 340, 250],
      data:[],
      type: 'line',
      //stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.5,

        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(255, 191, 0)'
          },
          {
            offset: 1,
            color: 'rgb(224, 62, 76)'
          }
        ])

      },
      emphasis: {
        focus: 'series'
      },
    },
    {
      name: '渤海',
      // data: [120, 282, 111, 234, 220, 340, 310],
      data:[],
      type: 'line',
      //stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.5,

        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(128, 255, 165)'
          },
          {
            offset: 1,
            color: 'rgb(1, 191, 236)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
    },
    {
      name: '东海',
      // data: [320, 132, 201, 334, 190, 130, 220],
      data:[],
      type: 'line',
      //stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.5,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(55, 162, 255)'
          },
          {
            offset: 1,
            color: 'rgb(116, 21, 219)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
    },
    {
      name: '南海',
      // data: [220, 402, 231, 134, 190, 230, 120],
      data:[],
      type: 'line',
      //stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.5,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(255, 0, 135)'
          },
          {
            offset: 1,
            color: 'rgb(135, 0, 157)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
    },
  ]
})
onMounted(()=>{
  let dom = document.getElementById('content-right3');
  let myChart = echarts.init(redArea.value, 'dark', {
    renderer: 'canvas',
    useDirtyRect: false
  });
  myChart.setOption(option.value);
  watch(props,()=>{
    //x轴数据(年份)
    option.value.xAxis[0].data=props.redTideArea.yearType
    const map=new Map()
    map.set("bo_sea","渤海")
    map.set("east_sea","东海")
    map.set("south_sea","南海")
    map.set("yellow_sea","黄海")
    //更改单个海域数据
    const keys=Object.keys(props.redTideArea.seaData)
    const seaData=[]
    keys.forEach((key,i)=>{
      const seaName=map.get(key)
      if(seaName) {
        //将新数据放回option
        option.value.series[i].name=seaName
        option.value.series[i].data=props.redTideArea.seaData[key].map(item=>item.area)
        //各个海洋名称
        option.value.legend.data.push(seaName)
      }
    })
    myChart.setOption(option.value)
  })
  window.addEventListener('resize', myChart.resize);
})
</script>

<template>
  <div class="content-right3" ref="redArea"></div>
</template>

<style scoped>
.content-right3{
  /*height:600px;*/
  //border:1px solid red;
  flex-grow:1;
}
</style>
<!--2024/2/2 13:14-->